import { ref, nextTick, computed } from "vue";
import {
  // 添加商品规格选项
  createGoodsSkusCard,
  // 修改商品规格选项
  updateGoodsSkusCard,
  // 删除商品规格选项
  deleteGoodsSkusCard,
  // 排序商品规格选项
  sortGoodsSkusCard,
  // 添加商品规格选项的值
  createGoodsSkusCardValue,
  // 修改商品规格选项的值
  updateGoodsSkusCardValue,
  // 删除商品规格选项的值
  deleteGoodsSkusCardValue,
  // 选择设置商品规格选项和值
  chooseAndSetGoodsSkusCard,
} from "~/api/goods.js";

import {
  useArrayMoveUp,
  useArrayMoveDown,
  // sku排列算法
  cartesianProductOf,
} from "~/composables/util.js";

// 当前商品ID
export const goodsId = ref(0);

// 规格选项列表
export const sku_card_list = ref([]);

export const sku_list = ref([]);

// 初始化规格选项列表
export function initSkuCardList(d) {
  // 就可以拿到商品规格数据
  // console.log("useSku.js-initSkuCardList",d);
  sku_card_list.value = d.goodsSkusCard.map((item) => {
    // 记录原来的值，v-model绑定这个值就行
    item.text = item.name;
    // 防止用户重复性的提交
    item.loading = false;

    item.goodsSkusCardValue.map((v) => {
      v.text = v.value || "属性值";
      return v;
    });
    return item;
  });

  sku_list.value = d.goodsSkus;
  console.log("sku_list:", sku_list.value);
}

// 添加规格选项
// 给"添加规格"这个按钮加一个加载的状态
export const btnLoading = ref(false);
export function addSkuCardEvent() {
  btnLoading.value = true;
  createGoodsSkusCard({
    goods_id: goodsId.value, // 商品ID
    name: "规格选项", // 规格名称
    order: 50, // 排序
    type: 0, // 规格类型 0文字
  })
    .then((res) => {
      // { // 这个对象就是res返回的数据
      //   "goods_id": 26,
      //   "name": "规格名称",
      //   "order": 50,
      //   "type": 0,
      //   "id": "135"
      // }
      sku_card_list.value.push({
        ...res,
        text: res.name,
        loading: false,
        goodsSkusCardValue: [],
      });
    })
    .finally(() => {
      btnLoading.value = false;
    });
}

// 修改商品规格选项
export function handleUpdate(item) {
  console.log("修改商品规格选项:", item);
  // {
  //   "id": 585,
  //   "goods_id": 49,
  //   "name": "颜色",
  //   "type": 0,
  //   "order": 1,
  //   "goodsSkusCardValue": [
  //       {
  //           "id": 1560,
  //           "goods_skus_card_id": 585,
  //           "name": "颜色",
  //           "value": "绿色",
  //           "order": 50,
  //           "text": "绿色"
  //       }
  //   ],
  //   "text": "颜色12",
  //   "loading": true
  // }
  item.loading = true;
  updateGoodsSkusCard(item.id, {
    // 商品id
    goods_id: item.goods_id,
    // 规格名称
    name: item.text,
    // 排序
    order: item.order,
    // 规格类型 0文字
    type: 0,
  })
    .then((res) => {
      item.name = item.text;
    })
    .catch((err) => {
      item.text = item.name;
    })
    .finally(() => {
      item.loading = false;
    });
}

// 删除规格选项
export function handleDelete(item) {
  item.loading = true;
  deleteGoodsSkusCard(item.id).then((res) => {
    // 如果删除成功，就会把当前对象给移除了，没必要把loading设为false
    const i = sku_card_list.value.findIndex((o) => o.id == item.id);
    if (i != -1) {
      sku_card_list.value.splice(i, 1);
    }
    getTableData();
  });
}

export const bodyLoading = ref(false);
// 排序规格选项
export function sortCard(action, index) {
  let oList = JSON.parse(JSON.stringify(sku_card_list.value));
  // 代码冗余，不能复用
  // if(action=="up"){
  //   useArrayMoveUp(oList,index);
  // }else{
  //   useArrayMoveDown(oList,index);
  // }

  let func = action == "up" ? useArrayMoveUp : useArrayMoveDown;
  func(oList, index);

  // 传给后端的是排序后的数据
  let sortData = oList.map((o, i) => {
    return {
      // 接口需要传这两个参数
      id: o.id,
      // order从1开始
      order: i + 1,
    };
  });

  console.log("sortData:", sortData);
  bodyLoading.value = true;
  sortGoodsSkusCard({
    sortdata: sortData,
  })
    .then((res) => {
      // 排序成功提交后，修改原数组的元素位置
      func(sku_card_list.value, index);
      getTableData();
    })
    .finally(() => {
      bodyLoading.value = false;
    });
}

// 选择设置规格
export function handleChooseSetGoodsSkusCard(id, data) {
  let item = sku_card_list.value.find((o) => o.id == id);
  item.loading = true;
  chooseAndSetGoodsSkusCard(id, data)
    .then((res) => {
      console.log("选择设置规格:", res);
      // 把res.goods_skus_card.name赋给item.name和item.text
      item.name = item.text = res.goods_skus_card.name;
      item.goodsSkusCardValue = res.goods_skus_card_value.map((o) => {
        o.text = o.value || "属性值";
        return o;
      });
      getTableData();
    })
    .finally(() => {
      item.loading = false;
    });
}

// 初始化规格的值
export function initSkusCardItem(id) {
  console.log("通过规格id来查询规格值列表：", id);
  const item = sku_card_list.value.find((o) => o.id == id);
  const loading = ref(false);
  const inputValue = ref("");
  const inputVisible = ref(false);
  const InputRef = ref();

  const handleClose = (tag) => {
    // dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1)
    loading.value = true;
    deleteGoodsSkusCardValue(tag.id)
      .then((res) => {
        let i = item.goodsSkusCardValue.findIndex((o) => o.id === tag.id);
        if (i != -1) {
          item.goodsSkusCardValue.splice(i, 1);
        }
        getTableData();
      })
      .finally(() => {
        loading.value = false;
      });
  };

  const showInput = () => {
    inputVisible.value = true;
    nextTick(() => {
      InputRef.value.input.focus();
    });
  };

  const handleInputConfirm = () => {
    // 如果input输入框没有值，直接隐藏
    if (!inputValue.value) {
      inputVisible.value = false;
      return;
    }

    loading.value = true;
    createGoodsSkusCardValue({
      goods_skus_card_id: id, // 规格id
      name: item.name, // 规格名称
      order: 50, // 排序
      value: inputValue.value, // 规格选项值
    })
      .then((res) => {
        item.goodsSkusCardValue.push({
          ...res,
          text: res.value,
        });
        getTableData();
      })
      .finally(() => {
        // 置空并隐藏
        inputVisible.value = false;
        inputValue.value = "";
        loading.value = false;
      });
  };

  // 修改商品规格选项的值
  // tag.text用于文本框显示
  const handleChange = (value, tag) => {
    console.log("新值:", value);
    loading.value = true;
    updateGoodsSkusCardValue(tag.id, {
      goods_skus_card_id: id,
      name: item.name,
      order: tag.order,
      value: value,
    })
      .then((res) => {
        // 修改成功，把新值赋给旧值
        tag.value = value;
        getTableData();
      })
      .catch((err) => {
        // 修改失败，把旧值赋给tag.text
        tag.text = tag.value;
      })
      .finally(() => {
        loading.value = false;
      });
  };

  return {
    item,
    inputValue,
    inputVisible,
    InputRef,
    handleClose,
    showInput,
    handleInputConfirm,
    loading,
    handleChange,
  };
}

// 初始化表格
export function initSkuTable() {
  // 没有规格选项值就不要添加到规格设置表格里了
  const skuLabels = computed(() =>
    sku_card_list.value.filter((v) => v.goodsSkusCardValue.length > 0),
  );

  // 获取表头
  const tableThs = computed(() => {
    let length = skuLabels.value.length;
    return [
      {
        name: "商品规格",
        // 要合并多少列
        colspan: length,
        // 有规格合并一行，否则合并两行
        rowspan: length > 0 ? 1 : 2,
        width: "",
      },
      {
        name: "销售价",
        width: "100",
        rowspan: 2,
      },
      {
        name: "市场价",
        width: "100",
        rowspan: 2,
      },
      {
        name: "成本价",
        width: "100",
        rowspan: 2,
      },
      {
        name: "库存",
        width: "100",
        rowspan: 2,
      },
      {
        name: "体积",
        width: "100",
        rowspan: 2,
      },
      {
        name: "重量",
        width: "100",
        rowspan: 2,
      },
      {
        name: "编码",
        width: "100",
        rowspan: 2,
      },
    ];
  });

  return {
    skuLabels,
    tableThs,
    sku_list,
  };
}

// 获取规格表格数据
function getTableData() {
  setTimeout(() => {
    if (sku_card_list.value.length === 0) return [];
    let list = [];
    sku_card_list.value.forEach((o) => {
      if (o.goodsSkusCardValue && o.goodsSkusCardValue.length > 0) {
        list.push(o.goodsSkusCardValue);
      }
    });

    // 没有规格选项值就没必要匹配了，返回一个空数组就行
    if (list.length == 0) {
      return [];
    }

    // 否则就进行排列组合
    // 转换前：
    // [
    //   [
    //     {"value":"绿色"},
    //     {"value":"黄色"}
    //   ],
    //   [
    //     {"value":"M"},
    //     {"value":"L"}
    //   ]
    // ]

    // 转化后：
    // [
    //   [
    //     {"value":"绿色"},
    //     {"value":"M"}
    //   ],
    //   [
    //     {"value":"绿色"},
    //     {"value":"L"}
    //   ]
    // ]
    let arr = cartesianProductOf(...list);
    console.log(arr);

    // 获取之前的规格列表，将规格ID排序之后转化成字符串
    let beforeSkuList = JSON.parse(JSON.stringify(sku_list.value)).map((o) => {
      if (!Array.isArray(o.skus)) {
        o.skus = Object.keys(o.skus).map((k) => o.skus[k]);
      }
      // o.skusId="290,282"
      o.skusId = o.skus
        .sort((a, b) => a.id - b.id)
        .map((s) => s.id)
        .join(",");
      return o;
    });

    sku_list.value = [];
    sku_list.value = arr.map((skus) => {
      let o = getBeforeSkuItem(JSON.parse(JSON.stringify(skus)), beforeSkuList);
      return {
        code: o?.code || "", // 如果o有值，那么code:o.code，否则code:""
        cprice: o?.cprice || "0.00",
        goods_id: goodsId.value,
        image: o?.image || "",
        oprice: o?.oprice || "0.00",
        pprice: o?.pprice || "0.00",
        skus,
        stock: o?.stock || 0,
        volume: o?.volume || 0,
        weight: o?.weight || 0,
      };
    });
  }, 200);
}

function getBeforeSkuItem(skus, beforeSkuList) {
  let skusId = skus
    .sort((a, b) => a.id - b.id)
    .map((s) => s.id)
    .join(",");
  return beforeSkuList.find((o) => {
    if (skus.length > o.skus.length) {
      return skusId.indexOf(o.skusId) != -1;
    }
    return o.skusId.indexOf(skusId) != -1;
  });
}
